<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boss直聘-互联网招聘神器！</title>
    <!-- 通过link标签来引用css文件夹中的style.css样式文件 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
     <!--  fetch库可以提高浏览器的兼容性 ie是不支持fetch这个函数的  -->
    <!-- <script src="https://cdn.bootcss.com/fetch/3.0.0/fetch.min.js"></script> -->
</head>
<!-- 调整代码格式  alt+shift+f -->

<body>
<div class="container" id="app">
  <!-- 头部 header -->
  <div class="home-header">
        <!-- 背景图上的文字 -->
        <img src="img/home-search-text.png" alt="">
        <!-- 表单 -->
        <form action="">
            <input type="text"placeholder="搜索职位/公司">
            <button type="submit">搜索</button>
        </form>
    </div>

    <!-- 分类信息 categories -->
    <div class="home-categories">
        <!-- 自定义列表 -->
        <dl v-for="item in categories">
            <dt>
                <!-- 属性绑定 -->
                <img :src="item.icon" alt="">
                <!-- 模板展示 -->
                <div>{{item.name}}</div>
            </dt>
            <dd>
                <a href=""class="tag" v-for="tag in item.tags">{{tag}}</a>
            </dd>
        </dl>
    </div>
</div>
    <!-- 页脚 footer-->
  <div class="home-footer">
        <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
        <p>企业服务热线和举报投诉：400 065 5799</p>
  </div>
  
     <script>
        const vm = new Vue({
            //  指定vue的这个实例绑定到那个元素上面
           el:'#app',
           data: {
               categories:[]              
           },
        //    当页面加载被加载的时候会调用一个函数来获取json数据
        created:function() {
            // 利用了ajax异步向服务器请求数据
            fetch('http://127.0.0.1:5500/api/index.json')
            .then( function(res){
                //可以利用res来请求json数据
                return res.json(); 
            } ) .then(function(data){
                    // 第二个then才是真正得到的数据data
                    // 利用console.log(data);测试在控制台输出数据
                    console.log(data);
                    // 将得到的数据赋值给categories数组
                    vm.categories=data;
            } )
         }
    })
     </script>  
</body>

</html>